<template>
  <div class="bg">
    <nav-com
      title="互助消费金"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div class="money-show">
      <div class="money">{{dataInfo.mutual_money || 0}}</div>
      <div class="help-text">互助消费金</div>
      <!-- <div
        class="button"
        @click="toDetail"
      >明细</div> -->
    </div>
    <div class="data-detail">
      <van-tabs
        class="tabs"
        v-model="active"
        sticky
        @click="onClick"
      >
        <van-tab
          v-for="index in tabList"
          :title="index"
          :key="index"
        >
        <div v-if="dataList.length == 0" style="margin:50px;text-align:center">
          --暂无数据--
        </div>
          <div
            v-else
            class="dataList"
            v-for="item in dataList"
            :key="item.id"
          >
            <div>
              <div class="title">{{item.memo}}</div>
              <div class="time">{{item.createtime}}</div>
            </div>
            <div class="num">
              {{active?'':'+'}}{{item.wallet}}
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import navCom from "@/component/nav";
import { helpTogetherDeatil } from "@/api/api";
import { getFttusers2 } from "@/api/api";
const config = {
  headers:{
    'Authorization': localStorage.getItem("token"),
    'token': localStorage.getItem("token")
  }
};

export default {
  components: {
    navCom,
  },
  filters: {
    dateFormat(val) {
      return moment(val * 1000).format("YYYY-MM-DD");
    },
  },
  data() {
    return {
      dataInfo: {},
      tabList: ["收入记录", "支出记录"],
      active: 0,
      dataList: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    //返回
    backHandler() {
      if(weixin.isAndroid()){
        window.JS_TROOPS.goBack()
      }else{
        this.$router.go(-1);
      }
    },
    toDetail() {
      this.$router.push("/helpDetail");
    },
    initData() {
      let urls = `${localStorage.getItem("share_weixin_shareurl")}/api/share/getuser`
      this.$axios.post(urls,{ wallet_type: "mutual" },config).then(res=>{
        if(res.data.code == 1){
          this.dataInfo = res.data.data;
        }else{
          this.$dialog.alert({
            message:res.data.msg
          })
        }
      })
      helpTogetherDeatil({ type: this.active + 1 })
        .then((result) => {
          if (result.data.code == 1) {
            this.dataList = result.data.data.data;
          }
        })
        .catch((err) => {});
    },
    onClick(name, title) {
      this.active = name;
      this.initData();
    },
  },
};
</script>

<style scoped>
.bg {
  background: #f2f3f7;
  height: 100%;
}
.goods-list {
  margin: 3.3vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.goods-list .good-box {
  margin-bottom: 4vw;
  min-height: 270px;
  width: 45vw;
  background: #fff;
}
.money-show {
  padding: 50px 0 10px 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  height: 12vh;
  background: url("../../../assets/my/helpBG.png");
  background-size: 100% 100%;
}
.money-show .money {
  font-size: 30px;
}
.money-show .help-text {
}
.money-show .button {
  height: 20px;
  border-radius: 10px;
  width: 50px;
  background: rgba(255, 255, 255, 0.4);
  color: #f84c5a;
  text-align: center;
  margin: 10px auto;
}
.data-detail {
  min-height: 74vh;
  padding-bottom: 10px;
}
.dataList {
  background: #fff;
  margin: 10px 20px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-radius: 8px;
}
.dataList .title {
  font-size: 20px;
}
.dataList .time {
  color: #ccc;
  font-size: 14px;
  margin-top: 10px;
}
.dataList .num {
  color: #fe4b20;
  font-size: 22px;
}
</style>
